<template>
	<view class="container">
		<view class='promoterHeader'>
			<view class='headerCon acea-row row-between-wrapper'>
				<view>
					<view class='name' style="font-size: 60rpx;">修改订单</view>
					<!-- <view class='money'><text class='num'>{{userInfo.diamond}}</text></view> -->
				</view>
				<view class='iconfont icon-jifenzhongxin'></view>
			</view>
		</view>

		<view class="content">
			<view class="input-group">
				<text class="label">出售数量：</text>
				<input type="number" v-model="quantity" placeholder="请输入出售数量" @input="validatePositiveInteger"
					class="input" />
				<text class="unit">/个</text>
			</view>

			<view class="input-group">
				<text class="label">出售单价：</text>
				<input type="digit" v-model="price" placeholder="单个钻石出售价格在600-1000之间" @input="onInput" class="input" />
				<text class="unit">/元</text>
			</view>
			
			<view class="input-group">
				<text class="label">总价：{{estimatedIncome}}</text>
			</view>
		</view>

		<button class="sell-button" @click="userDiamondUp">立即上架</button>
	</view>
</template>

<script>
	import {
		userDiamondCreate,
		userDiamondUp
	} from "@/api/api.js"
	import {
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				quantity: '',
				price: '',
				userInfo: []
			};
		},
		computed: {
			estimatedIncome() {
				const quantity = parseFloat(this.quantity) || 0;
				const price = parseFloat(this.price) || 0;
				return (quantity * price).toFixed(2);
			}
		},
		onLoad(options) {
			
			this.price = options.price/options.number;
			this.id = options.id;
			this.quantity = options.number;
			this.getUserInfo();
		},
		methods: {
			// 上架
			userDiamondUp() {
				let that = this;
				if (!this.quantity || isNaN(this.quantity) || parseFloat(this.quantity) <= 0) {
					uni.showToast({
						title: "请输入有效的出售数量",
						icon: "none"
					})
					return;
				}
				
				if (!this.price || isNaN(this.price) || parseFloat(this.price) <= 0) {
					uni.showToast({
						title: "请输入有效的出售价格",
						icon: "none"
					})
					return;
				}
				
				if (this.price<600 || this.price>1000) {
					uni.showToast({
						title: "钻石出售单价为600-1000元之间",
						icon: "error"
					})
					return;
				}
				uni.showModal({
					title: '提示',
					content: `您确定要上架该订单吗？`,
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							userDiamondUp({
								id: that.id,
								number: that.quantity,
								price: that.quantity*that.price
							}).then(res => {
								uni.showToast({
									title: "上架成功",
									icon: "success"
								})
								setTimeout(() => {
									uni.navigateBack();
								}, 1000)
							}).catch(err => {
								uni.showToast({
									title: err,
									icon: "none"
								})
							})
						} else if (res.cancel) {}
					}
				})

			},
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
			sellDiamonds() {
				let that = this;
				if (!this.quantity || isNaN(this.quantity) || parseFloat(this.quantity) <= 0) {
					uni.showToast({
						title: "请输入有效的出售数量",
						icon: "none"
					})
					return;
				}

				if (!this.price || isNaN(this.price) || parseFloat(this.price) <= 0) {
					uni.showToast({
						title: "请输入有效的出售价格",
						icon: "none"
					})
					return;
				}
				uni.showModal({
					title: '提示',
					content: `您确定要出售 ${that.quantity} 个钻石，共计 ${that.price} 元吗？`,
					confirmText: '确认出售',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							userDiamondCreate({
								number: that.quantity,
								price: that.price
							}).then(res => {
								uni.showToast({
									title: "出售成功",
									icon: "success"
								})
								that.quantity = '';
								that.price = '';
								that.getUserInfo();
							}).catch(err => {
								uni.showToast({
									title: err,
									icon: "error"
								})
							})
						} else if (res.cancel) {}
					}
				})

				//console.log('出售数量:', this.quantity, '价格:', this.price);
			},
			// 数量校验
			validatePositiveInteger() {
				let value = this.quantity;

				// 1. 移除所有非数字字符
				value = value.replace(/[^\d]/g, '');

				// 2. 移除前导 0 (如果不是 0 本身)
				if (value.length > 1 && value.startsWith('0')) {
					value = value.replace(/^0+/, '');
				}

				// 3. 确保至少为1
				if (value === '') {
					this.error = ''; // 如果为空，则不显示任何错误，允许用户输入
				} else if (parseInt(value) < 1) {
					this.error = '请输入大于0的整数';
				} else {
					this.error = '';
				}

				this.quantity = value;
			},
			// 金额校验
			onInput(e) {
				var that = this
				that.verify(e)
				setTimeout(() => { //这个一定要定时器
					that.price = e.detail.value
				}, 1)
			},
			verify(e) {
				e.detail.value = e.detail.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符  
				if (this.price.length > 2) { // 如果超过两个中0.第一位是0或者是小数点的话就把第一位删掉，
					if (e.detail.value[0] == 0 && e.detail.value.indexOf("0.") != 0) {
						e.detail.value = e.detail.value.toString().slice(1);
					} else if (e.detail.value[0] == '.') {
						e.detail.value = e.detail.value.toString().slice(1);
						e.detail.value = e.detail.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
					}
				} else {
					e.detail.value = e.detail.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的

				}

				e.detail.value = e.detail.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数  
				if (e.detail.value.indexOf(".") < 0 && e.detail.value != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
					e.detail.value = parseFloat(e.detail.value);
				} else if (e.detail.value.indexOf(".") == 0 && this.price.toString().length == 1) { //首为小数点，补全
					e.detail.value = e.detail.value.replace(/[^$#$]/g, "0.");
					e.detail.value = e.detail.value.replace(/\.{2,}/g, ".");
				};
			}
		}
	};
</script>

<style lang="scss">
	.container {
		// padding: 20px;
		background-color: #f7f7f7;
		min-height: 100vh;
		/* Ensure full height */
	}

	.promoterHeader {
		background: rgba(29, 176, 252, 1) !important;
		margin-bottom: 20rpx;
	}

	.header {
		margin-bottom: 20px;
		text-align: center;
		height: 300rpx;
		line-height: 300rpx;
		background: rgba(29, 176, 252, 1);
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #fff;
	}

	.content {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.input-group {
		display: flex;
		align-items: center;
		// margin-bottom: 15px;
		height: 80rpx;
	}

	.label {
		// width: 120px;
		font-size: 16px;
		color: #333;
	}

	.input {
		flex: 1;
		border-bottom: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px;
	}

	.unit {
		margin-left: 10px;
		font-size: 16px;
		color: #666;
	}

	.tip {
		text-align: right;
		color: #888;
		margin-top: 10px;
	}

	.sell-button {
		background-color: rgba(29, 176, 252, 1);
		color: #fff;
		padding: 12px 20px;
		border-radius: 6px;
		font-size: 18px;
		margin-top: 30px;
		position: fixed;
		width: 700rpx;
		bottom: 100rpx;
		left: 50%;
		margin-left: -350rpx;
		border-radius: 50rpx;
	}

	.sell-button:active {
		opacity: 0.8;
	}
</style>